<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>GlightJS轻量级JS模块化加载管理api</title>
	<link type="text/css" rel="stylesheet" href="dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
	<style>
	.dp-highlighter{padding-right: 1px;}
	.dp-highlighter li{word-break: break-all;}
	.dp-highlighter .tools{padding-bottom: 5px;}
    textarea{display: none;}
	</style>
</head>
<body>
<p>首先，我们先创建一个模块</p>
<textarea name="code" class="JScript">
/**
 * 定义模块  MyModule.js
 */
GlightJS.define(function(require, base){
    var Mod = {};
    Mod.hello = function(){
        alert("Hello word!");
    }
    return Mod;     // 返回模块对象
});
</textarea>

<p>其次,我们开始使用模块(可以写在html里)</p>
<textarea name="code" class="JScript">
GlightJS.define(function(require, base){
    var m = require("MyModule");    // 引入MyModule.js模块，可以缺省.js，GlightJS会自动识别并补加.js后缀
    m.hello();
});
</textarea>

<p>基本用法就这样，怎样，是不是很简单呢</p>
<p>下面介绍一下GlightJS一共包含的api</p>
<p>首先是包外api(什么是包外api？这个现在不好解释，等下文介绍到包内api时候就明白了)</p>
<textarea name="code" class="JScript">
/**
 * 包外api一个只有3个，分别是：
 * GlightJS.define（或直接define）     核心闭包方法
 * GlightJS.base                      用于设置全局默认模块基础路径
 * GlightJS.noConflict                用于解决define冲突问题
*/

// GlightJS.define：定义、使用模块
// 在上面已经的例子已经介绍过，这里就讲它的参数，它的参数一共有两个，分别是require和base，可以缺省，但是，注意【不可以更换其它名字】
// 当你是定义模块的时候，在闭包内返回一个值，那么在require模块时，将取得该值
// 注意，【定义模块时候，一个js文件只能包含一个define】
GlightJS.define(function(require, base){
    ......
});

//GlightJS.base，设置默认模块基础路径，影响范围：全局
//假设你的模块是放在其它路径下的，如 ./Mini-module/
GlightJS.base="./Mini-module/";
GlightJS.define(function(require, base){
    var m = require("MyModule");    // 此时，MyModule模块会从全局base路径查找，最后的模块路径解析为 ./Mini-module/MyModule.js
    m.hello();
});

//GlightJS.noConflict    解决define冲突
//假设你的代码已经使用过define，此时使用GlightJS会使define冲突，因此可以使用如下方法解决
var define2 = GlightJS.noConflict();
//也可以这样：（会直接影响全局变量）
GlightJS.noConflict("define2");
</textarea>

<p>包外api就这么讲完了，现在到包内api，包内api也是只有三个，分别是require、require.async和base，这些应该明白什么是包外什么是包内了吧，其实就是以define为分界线，外边使用的叫包外，里边使用的叫包内，就这么简单！</p>

<p>require：引入模块</p>
<textarea name="code" class="JScript">
GlightJS.define(function(require, base){
    var m = require("MyModule");    // 引入MyModule模块
                                    // 值得说明一下，这里是可以缺省.js的，GlightJS的处理方法是：
                                    // 1.当存在“#”、“?”两字符时候，不自动补加.js后缀
                                    // 2.当存在.js后缀时候，不自动补加.js后缀
                                    // 2.当存在.css后缀时候，认为是css文件，不自动补加.js后缀
                                    // 此方法对css加载有效哦！当是加载css的时候，require取得的值是css文件的link节点
                                    // 当不是css时候，全部认为是js，require取得到的值则是目标模块define内的返回值
    m.hello();
});
</textarea>


<p>require.async：按需异步加载</p>
<p>GlightJS中require加载的模块其实是在闭包执行前就完成加载的，那么问题就来了，如果有些模块我只想在执行到的时候才去加载而不是在define前一锅端呢，怎么办？</p>
<p>按需加载选异步！</p>
<textarea name="code" class="JScript">
// 方法一：之前的方法
GlightJS.define(function(require, base){
    alert(123456);
    var m = require("MyModule");
    m.hello();
});

// 方法二：异步的方法
GlightJS.define(function(require, base){
    alert(123456);
    require.async("MyModule", function(m){
        m.hello();
    });
});
/*
使用浏览器（推荐chrome）查看下文件的加载情况，你会发现：
在方法一中，在弹窗执行之前，MyModule.js已经完成加载了（其实是MyModule.js完成加载了以后才执行的）；
在方法二中，在弹窗执行之前，你会发现MyModule.js没有加载，当你关闭弹窗后，流程继续往下走，MyModule.js才会开始加载，这就说明了MyModule.js是在require.async的那一刻才开始加载的
*/
</textarea>

<p>base：设置包内模块默认基础路径，影响范围：包内有效</p>
<textarea name="code" class="JScript">
GlightJS.define(function(require, base){
    base("./Mini-module2/");    // 此时，该define包内的模块将在./Mini-module2/下查找
                                // 值得提醒：包内base设置优先于全局base设置！
                                //          一个包仅认第一次base设置，也就是说，当你在包内使用多个
                                //          base方法时候，只有最在上边的那个产生效果
                                // 返回值：假设你传递的是"./Mini-module2"时，自动补加/，返回./Mini-module2/，
                                //        也就是自动将\替换为/，并且不为/结尾时候，自动补加/结尾
                                //        当你不传值时候，返回当前包内模块的基础路径位置

    var path = base("");        // 此时是第二次执行base，不会对模块路径造成影响，因此，此时path得到的值为./Mini-module2/
    m.hello();
});
</textarea>

<script class="javascript" src="dp.SyntaxHighlighter/Scripts/shCore.js"></script>
<script class="javascript" src="dp.SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script class="javascript">dp.SyntaxHighlighter.HighlightAll('code');</script>
</body>
</html>